import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    Dimensions,
    ListView,
    TouchableOpacity,
    TextInput
} from 'react-native';

const {height, width} = Dimensions.get('window');
export default class CertificationPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name:'',
            IDCard:''
        }
    };

    render() {
        return (
            <View style={styles.container}>
                <View style={styles.titleView}>
                    <TouchableOpacity
                        onPress={()=>Actions.pop()}
                        style={styles.goBackView}>
                        <Image
                            source={ImageUtil.WhiteGoBack}
                            style={styles.goBackImg}/>
                    </TouchableOpacity>
                    <Text style={styles.titleMsg}>认证</Text>
                </View>
                <View style={styles.nameLabelView}>
                    <Text style={styles.nameMsg}>姓        名：</Text>
                    <View style={styles.nameTextInputView}>
                        <TextInput  ref={ (ref)=>this.topTextInput = ref }
                                    autoCapitalize={"none"}
                                    defaultValue={this.state.name}
                                    placeholder="请输入您的姓名"
                                    placeholderTextColor='#bababa'
                                    autoCorrect={false}
                                    style={styles.textInputView}
                                    onChangeText={(text)=>{
                                        this.setState({
                                            name:text,
                                        })
                                    }}/>
                    </View>
                </View>
                <View style={styles.IDCardView}>
                    <Text style={styles.IDCardMsg}>身份证号：</Text>
                    <View style={styles.nameTextInputView}>
                        <TextInput  ref={ (ref)=>this.bottomTextInput = ref }
                                    autoCapitalize={"none"}
                                    defaultValue={this.state.IDCard}
                                    placeholder="请输入您的姓名"
                                    placeholderTextColor='#bababa'
                                    autoCorrect={false}
                                    style={styles.textInputView}
                                    onChangeText={(text)=>{
                                        this.setState({
                                            IDCard:text,
                                        })
                                    }}/>
                    </View>
                </View>
                <View style={styles.enquiriesView}>
                    <TouchableOpacity
                        onPress={()=>Actions.AuditPage()}
                        style={styles.enquiriesButView}>
                        <Text style={styles.enquiriesButMsg}>去认证</Text>
                    </TouchableOpacity>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor:'#ffffff'
    },
    titleView:{
        backgroundColor:'#000000',
        width:width,
        alignItems:'center',
        justifyContent:'center'
    },
    titleMsg:{
        textAlign:'center',
        fontSize:20,
        color:'#ffffff',
        marginTop:34,
        marginBottom:29/2
    },
    goBackView:{
        position: 'absolute',
        left:15,bottom:29/2,
    },
    goBackImg:{
        height:20,
        width:20
    },
    nameLabelView:{
        height:49,
        marginLeft:15,
        flexDirection:'row',
        alignItems:'center',
        marginTop:29
    },
    nameMsg:{
        textAlign:'center',
        fontSize:15,
        marginBottom:15,
        marginTop:20
    },
    IDCardView:{
        marginLeft:15,
        flexDirection:'row',
        alignItems:'center'
    },
    IDCardMsg:{
        textAlign:'center',
        fontSize:15,
        marginBottom:15,
        marginTop:41/2
    },
    nameTextInputView:{
        marginTop:4,
        marginLeft:10,
        borderBottomWidth:1,
        borderColor:'#bababa',
        width:width-122,
        justifyContent:'center'
    },
    textInputView:{
        fontSize:15,
        width:width-122,
        height:44
    },
    enquiriesView:{
        marginTop:39,
        alignItems:'center',
        justifyContent:'center'
    },
    enquiriesButView:{
        width:width-30,
        backgroundColor:'#3090dd',
        borderRadius:5,
        alignItems:'center',
        justifyContent:'center',
        height:44
    },
    enquiriesButMsg:{
        fontSize:15,
        color:'#ffffff',
        textAlign:'center'
    },
    arrearsView:{
        marginTop:32,
        justifyContent:'center',
        alignItems:'center'
    },
    arrearsButView:{
        width:width-30,
        borderRadius:5,
        alignItems:'center',
        justifyContent:'center',
        height:44,
        borderColor:'#bababa',
        borderWidth:1
    },
    arrearsButMsg:{
        fontSize:15,
        color:'#00001a',
        textAlign:'center'
    }
});
